Update v4.2.0 (#93)v4.2.0

1 files changed, 167 insertions, 35 deletions

diff --git a/pages/en/manga/read/[...params].js b/pages/en/manga/read/[...params].js
index a7769e2..1076601 100644
--- a/pages/en/manga/read/[...params].js
+++ b/pages/en/manga/read/[...params].js
@@ -10,13 +10,27 @@ import { authOptions } from "../../../api/auth/[...nextauth]";
 import BottomBar from "@/components/manga/mobile/bottomBar";
 import TopBar from "@/components/manga/mobile/topBar";
 import Head from "next/head";
-import nookies from "nookies";
 import ShortCutModal from "@/components/manga/modals/shortcutModal";
 import ChapterModal from "@/components/manga/modals/chapterModal";
-import getAnifyPage from "@/lib/anify/page";
+// import getConsumetPages from "@/lib/consumet/manga/getPage";
+import { mediaInfoQuery } from "@/lib/graphql/query";
+// import { redis } from "@/lib/redis";
+// import getConsumetChapters from "@/lib/consumet/manga/getChapters";
+import { toast } from "sonner";
+import axios from "axios";
+import { redis } from "@/lib/redis";
+import getAnifyInfo from "@/lib/anify/info";
 
-export default function Read({ data, currentId, sessions }) {
-  const [info, setInfo] = useState();
+export default function Read({
+  data,
+  info,
+  chaptersData,
+  currentId,
+  sessions,
+  provider,
+  mangaDexId,
+  number,
+}) {
   const [chapter, setChapter] = useState([]);
   const [layout, setLayout] = useState(1);
 
@@ -30,8 +44,8 @@ export default function Read({ data, currentId, sessions }) {
   const [paddingX, setPaddingX] = useState(208);
   const [scaleImg, setScaleImg] = useState(1);
 
-  const [nextChapterId, setNextChapterId] = useState(null);
-  const [prevChapterId, setPrevChapterId] = useState(null);
+  const [nextChapter, setNextChapter] = useState(null);
+  const [prevChapter, setPrevChapter] = useState(null);
 
   const [currentChapter, setCurrentChapter] = useState(null);
   const [currentPage, setCurrentPage] = useState(0);
@@ -40,17 +54,22 @@ export default function Read({ data, currentId, sessions }) {
 
   const router = useRouter();
 
+  // console.log({ info });
+
   useEffect(() => {
-    hasRun.current = false;
-  }, [currentId]);
+    toast.message("This page is still under development", {
+      description: "If you found any bugs, please report it to us!",
+      position: "top-center",
+      duration: 10000,
+    });
+  }, []);
 
   useEffect(() => {
-    const get = JSON.parse(localStorage.getItem("manga"));
-    const chapters = get.manga;
+    hasRun.current = false;
+    const chapters = chaptersData.find((x) => x.providerId === provider);
     const currentChapter = chapters.chapters?.find((x) => x.id === currentId);
 
     setCurrentChapter(currentChapter);
-    setInfo(get.data);
     setChapter(chapters);
 
     if (Array.isArray(chapters?.chapters)) {
@@ -60,25 +79,36 @@ export default function Read({ data, currentId, sessions }) {
       if (currentIndex !== -1) {
         const nextChapter = chapters.chapters[currentIndex - 1];
         const prevChapter = chapters.chapters[currentIndex + 1];
-        setNextChapterId(nextChapter ? nextChapter.id : null);
-        setPrevChapterId(prevChapter ? prevChapter.id : null);
+        setNextChapter(nextChapter ? nextChapter : null);
+        setPrevChapter(prevChapter ? prevChapter : null);
       }
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentId]);
 
   useEffect(() => {
     const handleKeyDown = (event) => {
-      if (event.key === "ArrowRight" && event.ctrlKey && nextChapterId) {
+      event.preventDefault();
+      if (event.key === "ArrowRight" && event.ctrlKey && nextChapter?.id) {
         router.push(
-          `/en/manga/read/${chapter.providerId}?id=${
-            info.id
-          }&chapterId=${encodeURIComponent(nextChapterId)}`
+          `/en/manga/read/${
+            chapter.providerId
+          }?id=${mangaDexId}&chapterId=${encodeURIComponent(nextChapter?.id)}${
+            info?.id?.length > 6 ? "" : `&anilist=${info?.id}`
+          }&num=${nextChapter?.number}`
         );
-      } else if (event.key === "ArrowLeft" && event.ctrlKey && prevChapterId) {
+      } else if (
+        event.key === "ArrowLeft" &&
+        event.ctrlKey &&
+        prevChapter?.id
+      ) {
         router.push(
-          `/en/manga/read/${chapter.providerId}?id=${
-            info.id
-          }&chapterId=${encodeURIComponent(prevChapterId)}`
+          `/en/manga/read/${
+            chapter.providerId
+          }?id=${mangaDexId}&chapterId=${encodeURIComponent(prevChapter?.id)}${
+            info?.id?.length > 6 ? "" : `&anilist=${info?.id}`
+          }&num=${prevChapter?.number}`
         );
       }
       if (event.code === "Slash" && event.ctrlKey) {
@@ -99,7 +129,9 @@ export default function Read({ data, currentId, sessions }) {
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [nextChapterId, prevChapterId, visible, isKeyOpen, paddingX]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nextChapter?.id, prevChapter?.id, visible, isKeyOpen, paddingX]);
 
   return (
     <>
@@ -134,13 +166,15 @@ export default function Read({ data, currentId, sessions }) {
             <TopBar info={info} />
             <BottomBar
               id={info?.id}
-              prevChapter={prevChapterId}
-              nextChapter={nextChapterId}
+              prevChapter={prevChapter}
+              nextChapter={nextChapter}
               currentPage={currentPage}
               chapter={chapter}
-              page={data}
+              data={data}
               setSeekPage={setSeekPage}
               setIsOpen={setIsChapOpen}
+              number={number}
+              mangadexId={mangaDexId}
             />
           </>
         )}
@@ -149,13 +183,17 @@ export default function Read({ data, currentId, sessions }) {
             data={chapter}
             page={data}
             info={info}
+            number={number}
+            mediaId={mangaDexId}
             currentId={currentId}
             setSeekPage={setSeekPage}
+            providerId={provider}
           />
         )}
         {layout === 1 && (
           <FirstPanel
             aniId={info?.id}
+            providerId={provider}
             data={data}
             hasRun={hasRun}
             currentId={currentId}
@@ -164,19 +202,22 @@ export default function Read({ data, currentId, sessions }) {
             visible={visible}
             setVisible={setVisible}
             chapter={chapter}
-            nextChapter={nextChapterId}
-            prevChapter={prevChapterId}
+            nextChapter={nextChapter}
+            prevChapter={prevChapter}
             paddingX={paddingX}
             session={sessions}
             mobileVisible={mobileVisible}
             setMobileVisible={setMobileVisible}
             setCurrentPage={setCurrentPage}
+            mangadexId={mangaDexId}
+            number={number}
           />
         )}
         {layout === 2 && (
           <SecondPanel
             aniId={info?.id}
             data={data}
+            chapterData={chapter}
             hasRun={hasRun}
             currentChapter={currentChapter}
             currentId={currentId}
@@ -185,12 +226,14 @@ export default function Read({ data, currentId, sessions }) {
             visible={visible}
             setVisible={setVisible}
             session={sessions}
+            providerId={provider}
           />
         )}
         {layout === 3 && (
           <ThirdPanel
             aniId={info?.id}
             data={data}
+            chapterData={chapter}
             hasRun={hasRun}
             currentId={currentId}
             currentChapter={currentChapter}
@@ -202,6 +245,7 @@ export default function Read({ data, currentId, sessions }) {
             scaleImg={scaleImg}
             setMobileVisible={setMobileVisible}
             mobileVisible={mobileVisible}
+            providerId={provider}
           />
         )}
         {visible && (
@@ -224,42 +268,130 @@ export default function Read({ data, currentId, sessions }) {
         )}
       </div>
     </>
+    // <p></p>
   );
 }
 
-export async function getServerSideProps(context) {
-  const cookies = nookies.get(context);
+async function fetchAnifyPages(id, number, provider, readId, key) {
+  try {
+    let cached;
 
+    cached = await redis.get(`pages:${readId}`);
+
+    if (cached) {
+      return JSON.parse(cached);
+    }
+
+    const url = `https://api.anify.tv/pages?id=${id}&chapterNumber=${number}&providerId=${provider}&readId=${encodeURIComponent(
+      readId
+    )}`;
+
+    const { data } = await axios.get(url);
+
+    if (!data) {
+      return null;
+    }
+
+    await redis.set(
+      `pages:${readId}`,
+      JSON.stringify(data),
+      "EX",
+      60 * 60 * 24 * 7
+    );
+
+    return data;
+  } catch (error) {
+    return { error: "Error fetching data" };
+  }
+}
+
+export async function getServerSideProps(context) {
   const key = process.env.API_KEY;
 
   const query = context.query;
   const providerId = query.params[0];
   const chapterId = query.chapterId;
   const mediaId = query.id;
+  const number = query.num;
+  const anilistId = query.anilist;
+
+  const session = await getServerSession(context.req, context.res, authOptions);
+  const accessToken = session?.user?.token || null;
+
+  // const data = await getConsumetPages(mediaId, providerId, chapterId, key);
+  // const chapters = await getConsumetChapters(mediaId, redis);
+
+  const dataManga = await fetchAnifyPages(
+    mediaId,
+    number,
+    providerId,
+    chapterId,
+    mediaId,
+    key
+  );
+
+  let info;
 
-  if (!cookies.manga || cookies.manga !== mediaId) {
+  if (anilistId) {
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+      },
+      body: JSON.stringify({
+        query: mediaInfoQuery,
+        variables: {
+          id: parseInt(anilistId),
+          type: "MANGA",
+        },
+      }),
+    });
+    const json = await response.json();
+    info = json?.data?.Media;
+  } else {
+    const datas = await getAnifyInfo(mediaId);
+    if (datas) {
+      info = datas;
+    }
+  }
+
+  const chapters = await (
+    await fetch("https://api.anify.tv/chapters/" + mediaId + "?apikey=" + key)
+  ).json();
+
+  if ((dataManga && dataManga?.error) || dataManga?.length === 0) {
     return {
       redirect: {
-        destination: `/en/manga/${mediaId}`,
+        destination: `/en/manga/${anilistId}?chapter=404`,
       },
     };
   }
 
-  const session = await getServerSession(context.req, context.res, authOptions);
-
-  const data = await getAnifyPage(mediaId, providerId, chapterId, key);
+  /*
+  const { data } = await axios.get(
+    `https://beta.moopa.live/api/v2/info/${romaji}${
+      english ? `/${english}` : ""
+    }${native ? `/${native}` : ""}?id=${anilistId}`
+  );
 
   if (data.error) {
     return {
       notFound: true,
     };
   }
+  */
 
   return {
     props: {
-      data: data,
+      data: dataManga,
+      mangaDexId: mediaId,
+      info: info,
+      number: number,
+      chaptersData: chapters,
       currentId: chapterId,
       sessions: session,
+      provider: providerId,
     },
   };
 }